<template>
  <div class="box">
    <a-form-model
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      v-bind="layout"
    >
      <a-form-model-item has-feedback label="用户名" prop="username">
        <a-input
          v-model="ruleForm.username"
          autocomplete="off"
          placeholder="请输入用户名"
        >
        </a-input>
      </a-form-model-item>
      <a-form-model-item has-feedback label="账号" prop="account">
        <a-input
          v-model="ruleForm.account"
          autocomplete="off"
          placeholder="请设置账号"
        >
        </a-input>
      </a-form-model-item>
      <a-form-model-item has-feedback label="密码" prop="pass">
        <a-input-password placeholder="请输入密码" v-model="ruleForm.pass">
        </a-input-password>
      </a-form-model-item>
      <a-form-model-item has-feedback label="再次输入密码" prop="chpass">
        <a-input-password
          placeholder="请再次输入密码"
          v-model="ruleForm.chpass"
        >
        </a-input-password>
      </a-form-model-item>
      <a-form-model-item has-feedback label="性别" prop="sex">
        <a-radio-group v-model="ruleForm.sex">
          <a-radio :value="0"> 男 </a-radio>
          <a-radio :value="1"> 女 </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item has-feedback label="年龄" prop="age">
        <a-input-number v-model="ruleForm.age" :min="1" :max="150" />
      </a-form-model-item>
      <a-form-model-item has-feedback label="班级" prop="class">
        <a-cascader
          v-model="ruleForm.class"
          :options="options"
          :default-value="['zhejiang', 'hangzhou', 'xihu']"
          @change="onChange"
        />
      </a-form-model-item>
      <a-form-model-item has-feedback label="验证码" prop="key">
        <a-row>
          <a-col :span="12">
            <a-input
              v-model="ruleForm.key"
              autocomplete="off"
              :placeholder="this.key_placeholder"
            >
            </a-input>
          </a-col>
          <a-col :span="12">
            <a-button
              type="Default"
              @click="daojishi()"
              v-show="this.button_type"
            >
              获取验证码
            </a-button>
            <a-button type="Default" disabled v-show="!this.button_type">
              获取验证码
            </a-button>
          </a-col>
        </a-row>
      </a-form-model-item>

      <a-form-model-item :wrapper-col="{ span: 15, offset: 5 }">
        <a-button
          type="primary"
          @click="submitForm('ruleForm')"
          block
          id="login_button"
        >
          注册
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>
<script>
export default {
  name: "studentRe",
  components: {},
  data() {
    // 密码校验
    let validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入你的密码"));
      } else if (
        !/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/.test(
          value
        )
      ) {
        callback(
          new Error(
            "请输入6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种"
          )
        );
      } else {
        callback();
      }
    };
    // 二次密码校验
    let validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("校验密码不能为空！"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次密码不一致！"));
      } else {
        callback();
      }
    };
    // 账号验证
    let validateAccount = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入你的账号"));
      } else if (!/^[0-9]{3,15}$/.test(value)) {
        callback(new Error("请输入3到15位数字"));
      } else {
        callback();
      }
    };
    // 课程校验
    let validateClass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请选择你所在的班级"));
      } else {
        callback();
      }
    };
    // 验证码校验
    let validateKey = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        username: "",
        account: "",
        pass: "",
        chpass: "",
        age: "",
        sex: "",
        class: "",
        key: "",
      },
      key_placeholder: "请输入验证码",
      button_type: true,
      rules: {
        username: [
          {
            required: true,
            min: 6,
            max: 20,
            message: "用户名长度6-20字符",
            trigger: "change",
          },
        ],
        class: [{ validator: validateClass, trigger: "change" }],
        account: [{ validator: validateAccount, trigger: "change" }],
        pass: [{ validator: validatePass, trigger: "change" }],
        chpass: [{ validator: validatePass2, trigger: "change" }],
        key: [{ validator: validateKey, trigger: "change" }],
      },
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 15 },
      },
      options: [
        {
          value: "zhejiang",
          label: "Zhejiang",
          children: [
            {
              value: "hangzhou",
              label: "Hangzhou",
              children: [
                {
                  value: "xihu",
                  label: "West Lake",
                },
              ],
            },
          ],
        },
        {
          value: "jiangsu",
          label: "Jiangsu",
          children: [
            {
              value: "nanjing",
              label: "Nanjing",
              children: [
                {
                  value: "zhonghuamen",
                  label: "Zhong Hua Men",
                },
              ],
            },
          ],
        },
      ],
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$router.push({ path: "/backstage" });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // 点击获取验证码会有倒计时，并且不能点击按钮
    daojishi() {
      var count = 5; //倒计时时间
      this.button_type = false; //按钮不可点击
      this.key_placeholder = count + "s后可重试"; //显示倒计时文案
      var times = setInterval(() => {
        this.key_placeholder = --count + "s后可重试"; //递减
        if (count <= -1) {
          // <=0 变成获取按钮
          this.key_placeholder = "请重新获取验证码";
          this.button_type = true;
          clearInterval(times);
        }
      }, 1000); //1000毫秒后执行
    },
  },
};
</script>
<style >
.box {
  width: 50%;
  margin: 0 auto;
}
#login_button:hover {
  background-color: rgb(82, 82, 218);
}
</style>